<template>
	<view>
			 <view >  
		<uni-section :title="titletype" type="line"></uni-section>
		<ad unit-id="{{_banner}}"></ad>

		<view class="uni-padding-wrap">
			<view class="uni-title uni-common-mt uni-common-pl">{{questionT}}</view>
			<view>
				<view class="uni-list">
					<radio-group @change="radioChange">
						<label class="uni-list-cell uni-list-cell-pd" v-for="(item,index) in QueItem" :key="item.value">
							<view>
								<radio :value="item.value" :checked="true === !current" />
							</view>
							<span v-if="index==0">
								A、{{item.name}}
							</span>
							<span v-if="index==1">
								B、{{item.name}}
							</span><span v-if="index==2">
								C、{{item.name}}
							</span><span v-if="index==3">
								D、{{item.name}}
							</span>

						</label>
					</radio-group>
				<view style="color: red;">{{daan}}</view>
					<ad  unit-id="{{_feedsad}}" type="feeds"></ad>
				</view>
			</view>

		</view>
		<!-- 消息提示 -->
		<uni-popup id="popupMessage" ref="popupMessage" type="message">
			<uni-popup-message :type="msgType" :message="message" :duration="2000"></uni-popup-message>
		</uni-popup>
		<!-- 对话框 -->
		<uni-popup id="popupDialog" ref="popupDialog" type="dialog">
			<uni-popup-dialog :type="msgType" :title="title" :content="message" :before-close="true"
				@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
			 </view>

	</view>
</template>
<script>
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
//	const requestUrl = 'https://asxsyd92.com/api/question/getquestion?tab=&limit=100&name='
	const duration = 2000
	export default {
		components: {
			uniPopupMessage: uniPopupMessage,
			uniPopupDialog: uniPopupDialog
		},
		data() {
			return {
		
				question: [],
				_feedsad: "",
				_banner: "",
				_shiping: "",
				_chapingad: '',
				questionT: "",
				daan:'',
				titletype: "趣味答题",
				current: 4,
				typeid: "",
				questionItem: [],
				QueItem: [],
				type: 'top',
				msgType: 'success',
				message: '这是一条成功消息提示',
				value: '默认输入的内容',
				title: '温馨提示',
				videoAd: null,
			
			}

		},
		onLoad(e) {
		
			this.feedsad.sort(() => Math.random() - 0.5);
			this._feedsad = this.feedsad[0];

			this.bannerad.sort(() => Math.random() - 0.5);
			this._banner = this.bannerad[0];

			this.jilishipingad.sort(() => Math.random() - 0.5);


			this.chapingad.sort(() => Math.random() - 0.5);
			this._chapingad = this.chapingad[0];

		
			this.titletype = e.name;
			this.typeid = e.id,
				uni.setNavigationBarTitle({
					title: e.name
				});
			this.getData();
		}
		, onReady() {

			setTimeout(() => {

				this.type = "top"

				this.message = '终于等到您了，赶紧开启您的知识海洋吧！';
				this.$refs.popupMessage.open();


			}, 50000)



			setTimeout(() => {

				/* 建议放在onReady里执行，提前加载广告 */
				let InterstitialAd = qq.createInterstitialAd({ adUnitid: '25969182235354e0820e4bdf92edd1f4' });
				InterstitialAd.load().catch((err) => {
					console.error('load', err)
				})
				InterstitialAd.onLoad(() => {
					console.log('onLoad event emit')
				})
				InterstitialAd.onClose(() => {
					console.log('close event emit')
				})
				InterstitialAd.onError((e) => {
					console.log('error', e)
				})
				/* 建议放在需要展示插屏广告的时机执行 */
				InterstitialAd.show().catch((err) => {
					console.error('show', err)
				})
			}, 5000)
		},
		methods: {
			getData() {
			var _this=	this;
				uni.request({
					url: _this.URLs+"/api/question/getQuestion?tab=&limit=100&name=" + this.typeid,
					method: "post",
					header: { "Content-Type": "text/plain; charset=utf-8" },
					dataType: 'text',
					data: {
						noncestr: Date.now()
					},
					success: (res) => {
					
						let data =JSON.parse( res.data);
						console.log(data);
						if (data.data.length > 0) {
							var da = data.data;
							for (var i = 0; i < da.length; i++) {
								let items = [];
								var array = new Array(4)
									.fill(0)
									.map((v, i) => i + 1)
									.sort(() => 0.5 - Math.random())
									.filter((v, i) => i < 4);


								let a = "A|" + da[i].answer

								items.push({ value: a, name: da[i].q_a });

								let b = "B|" + da[i].answer
								items.push({ value: b, name: da[i].q_b });
								let c = "C|" + da[i].answer
								items.push({ value: c, name: da[i].q_c });
								let d = "D|" + da[i].answer
								items.push({ value: d, name: da[i].q_d });
								//打乱顺序
								items.sort(() => Math.random() - 0.5);
								this.questionItem.push({ items: items, answer: da[i].answer, question: da[i].question, q_qhar: da[i].q_qhar });
							}

							let qt = this.questionItem[0];
							this.questionT = qt.question;
							this.QueItem = qt.items;


						} else {
							uni.showModal({
								content: "没有查到题库",
								showCancel: false,
								success: function (res) {
									if (res.confirm) {
										uni.navigateBack();
									}
								}
							});

						}

					},
					fail: (err) => {

						uni.showModal({
							content: err.errMsg,
							showCancel: false,
							success: function (res) {
								if (res.confirm) {
									uni.navigateBack();
								}
							}
						});

					},
					complete: () => {
						this.loading = false;
					}
				});
			},
			radioChange(evt) {

				this.daan='';
				let answer = evt.detail.value;
				if (answer.indexOf("|") > 0) {
					let da = answer.split("|");
					if (da.length > 1) {
						if (da[0] !== da[1]) {
							if(this.current>10){
							this.type = "top";
							this.title = "不是正确答案哟！";
							this.message = '哎呀，答错了，是否看一段视频好好思考一下？再继续吧！';
							this.$refs.popupDialog.open();
							}else{
					
						this.type = "top";
							this.title = "不是正确答案哟！";
							this.message = '哎呀，答错了,再试试！';
							this.$refs.popupDialog.open();
									// uni.showModal({
									// 		content: "哎呀，答错了,再试试！",
									// 		showCancel: false,
									// 		success: function (res) {
									// 			if (res.confirm) {
													
									// 			}
									// 		}
									// 	});
							}
							this.current=this.current+1;
					console.log(this.current);

						}
						else {	
							this.current=this.current+1;

							this.type = "center"
							this.message = '知识就是力量，加油！';
							this.$refs.popupMessage.open();

							this.questionItem.splice(0, 1);

							if (this.questionItem.length == 0) {
							console.log(this.current);
								this.current=4;
								uni.showModal({
									content: "恭喜您完成今天任务！",
									showCancel: false,
									success: function (res) {
										if (res.confirm) {
											uni.navigateBack();
										}
									}
								});

							} else {
								this.current = this.current+1;
								let qt = this.questionItem[0];
								this.questionT = qt.question;
								this.QueItem = qt.items;
							
									console.log(this.current);
							}
						}
					}

				}


			},
			/**
			 * 对话框点击确认按钮
			 */
			dialogConfirm(done) {

				let m = this;
				console.log(m);
				m.jilishipingad.sort(() => Math.random() - 0.5);
				this.videoAd = qq.createRewardedVideoAd({ adUnitid: m.jilishipingad[0] });
				this.videoAd.onError(function (res) { console.log('videoAd onError', res) });
				this.videoAd.onLoad(function (res) { console.log('videoAd onLoad', res) });
				this.videoAd.onClose(function (res) {
					if (res.isEnded) {
						m.daan=m.questionItem[0].q_qhar;
						// console.log(m.questionItem[0]);
						// uni.showModal({
						// 	content: m.questionItem[0].q_qhar,
						// 	showCancel: false,
						// 	success: function (res) {
						// 		if (res.confirm) {

						// 			m.questionItem.splice(0, 1);

						// 			if (m.questionItem.length > 0) {

						// 				m.questionT = m.questionItem[0].question;
						// 				m.QueItem = m.questionItem[0].items;
						// 				m.current = m.current+1;
									
						// 			} else {
						// 				uni.showModal({
						// 					content: "恭喜您完成今天任务！",
						// 					showCancel: false,
						// 					success: function (res) {
						// 						if (res.confirm) {
						// 							uni.navigateBack();
						// 						}
						// 					}
						// 				});
						// 			}

						// 		}
						// 	}
						// });

					} else {

						m.type = "top";
						m.title = "温馨提示！";
						m.message = '必须看完才能进入下一题挑战！';
						m.$refs.popupDialog.open();
					}
					console.log('videoAd onClose', res)
				});
				this.videoAd.load().then(() => {
					console.log('激励视频加载成功');
					this.videoAd.show().then(() => { console.log('激励视频 广告显示成功') })
						.catch(err => { console.log('激励视频 广告显示失败') })
				})
					.catch(err => { console.log('激励视频加载失败'); })
				this.$refs.popupMessage.open()
				console.log('点击确认');
				// 需要执行 done 才能关闭对话框
				done()
			},

			/**
			 * 对话框取消按钮
			 */
			dialogClose(done) {
				done();
				//uni.navigateBack();
			},

		},
	}

</script>

<style>
	/* 头条小程序组件内不能引入字体 */
	/* #ifdef MP-TOUTIAO */
	@font-face {
		font-family: uniicons;
		font-weight: normal;
		font-style: normal;
		src: url('~@/static/uni.ttf') format('truetype');
	}

	.uni-list-cell {
		justify-content: flex-start
	}

	.word-btn-white {
		font-size: 18px;
		color: #FFFFFF;
	}

	.word-btn {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		border-radius: 6px;
		height: 48px;
		margin: 15px;
		background-color: #007AFF;
	}

	.word-btn--hover {
		background-color: #4ca2ff;
	}


	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 5px 15px;
	}


	.popup-content {
		background-color: #fff;
		padding: 15px;
	}

	/* #ifndef APP-NVUE */
	.button {
		margin: 0;
		padding: 0;
		line-height: 1;
	}

	/* #endif */

	.button {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		flex: 1;
		height: 40px;
		margin: 0 15px;
	}

	.button-text {
		color: #fff;
		font-size: 14px;
	}

	.message {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		padding: 15px 0;
	}

	.dialog {
		padding: 15px 0;
	}

	.dialog-box {
		margin-left: 15px;
		margin-bottom: 15px;
	}

	.dialog-text {
		font-size: 14px;
		color: #666;
	}

	.share {
		padding: 15px 0;
	}

	.popup__success {
		color: #fff;
		background-color: #4cd964;
	}

	.popup__warn {
		color: #fff;
		background-color: #f0ad4e;
	}

	.popup__error {
		color: #fff;
		background-color: #dd524d;
	}

	.popup__info {
		color: #fff;
		background-color: #909399;
	}
</style>